<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--bootstrap+vue简易留言板（todolist）-->
    <!--bootstrap：css框架 跟jQueryMobile一样.只需要给标签赋class，角色就能使用-->
    <!--bootstrap的使用是依赖jQuery-->

    <!--布局用bootstrap 实现功能用vue-->
    <style>

    </style>
    <!--引入包的顺序：注意css，js文件引入的先后顺序，应该先引入jquery的js文件再引入bootstrap的css文件-->
    <script src="js/jquery.min.js"></script>
    <!--<script src="js/jquery.js"></script>-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
    <script src="../../vue.js"></script>


    <script>
        window.onload=function () {
            new Vue({
               el:'#box',
               data:{//对表格内的数据进行处理
                   myData:[
                   //     {
                   //     不要假数据了
                   //      name:'xxx',
                   //      age:50
                   //
                   // }
                   ],
                   // username:'asd',
                   // age:12
                   username:'',
                   age:''
               },
                methods:{
                   add:function () {//按钮“添加”的效果
                       //点击“添加”的按钮，访问数据
                       // alert(1);
                       this.myData.push({
                           name:this.username,
                           age:this.age
                       });
                       // 每次添加完之后点击添加按钮，文本框的内容清空
                       this.username='';
                       this.age=''
                   }
                }
            });
        };
    </script>
</head>
<body>
<div class="container" id="box">
    <form action="" role="form">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" class="form-control" placeholder="输入用户名" v-model="username">
        </div>
        <div class="form-group">
            <label for="age">年龄</label>
            <input type="text" id="age" class="form-control" placeholder="输入年龄" v-model="age">
        </div>
        <div class="form-group">
            <input type="button" value="添加" class="btn btn-primary" v-on:click="add()">
            <input type="reset" value="重置" class="btn btn-danger">
        </div>
    </form>
    <hr>
    <table class="table table-bordered table-hover">
        <caption class="h3 text-info text-center">用户信息表</caption>
        <tr class="text-danger">
            <th class="text-center">序号</th>
            <th class="text-center">名字</th>
            <th class="text-center">年龄</th>
            <th class="text-center">操作</th>
        </tr>
        <!--<tr class="text-center">-->
            <!--<td>1</td>-->
            <!--<td>blue</td>-->
            <!--<td>50</td>-->
            <!--<td><button class="btn btn-primary btn-sm">删除</button></td>-->
        <!--</tr>-->
        <!--循环输出tr-->
        <tr class="text-center" v-for="item in myData">
            <!--序号-->
            <td>{{$index+1}}</td>
            <!--名字-->
            <td>{{item.name}}</td>
            <!--年龄-->
            <td>{{item.age}}</td>
            <!--data-toggle切换-->
            <td><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button></td>
        </tr>
        <!--v-show="myData.length==0"数组不为空的时候才显示-->
        <tr v-show="myData.length!=0">
            <!--合并单元格-->
            <td colspan="4" class="text-right">
                <button class="btn btn-danger btn-sm">删除全部</button>
            </td>
        </tr>
        <!--v-show="myData.length==0"数组是空的时候才显示-->
        <tr v-show="myData.length==0">
            <td colspan="4" class="text-center text-muted">
                <p>暂无数据</p>
            </td>
        </tr>
    </table>

    <!--模态框 弹出框-->
    <!--fade淡入淡出的效果-->
    <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
        <!--盒子里包含内容(内容里有header footer body)-->
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <!--data-dismiss让模态框消失-->
                    <button type="button" class="close" data-dismiss="modal">
                        <span>
                            &times;
                        </span>
                    </button>
                    <h4 class="modal-title">确认删除吗？</h4>
                </div>
                <div class="modal-body text-right">
                    <!--data-dismiss="modal"消失-->
                    <button class="btn btn-primary btn-sm"  data-dismiss="modal">取消</button>
                    <button class="btn btn-danger btn-sm"  data-dismiss="modal">确认</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>